<template>
  <div>
    <h1>App</h1>
    <button @click="Comp = 'News'">新闻</button>
    <button @click="Comp = 'Music'">音乐</button>
    <button @click="Comp = 'Play'">娱乐</button>

    <keep-alive>
      <component :is="Comp" />
    </keep-alive>
  </div>
</template>

<script>
/* 
  异步组件:
    1. 引入组件的时候,使用函数写法,函数内部使用import动态引入某个组件,并返回import引入的结果
    2. 当webpack打包的时候,如果看到import动态引入某个文件,则会把import引入的文件分开打包
    3. 当组件被需要被渲染的时候,就会调用当前的函数,执行内部import动态引入,如果import返回成功的promise,则代表引入成功,并渲染结果
*/
const Music = () => import("@/components/Music");
const News = () => import("@/components/News");
const Play = () => import("@/components/Play");
export default {
  name: "App",
  components: {
    Music,
    News,
    Play,
  },
  data() {
    return {
      Comp: "",
    };
  },
};
</script>

<style></style>
